﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" th:href="@{/verdor12345/qxEasyUI/themes/metro/easyui.css}"/>
    <link rel="stylesheet" th:href="@{/verdor12345/qxEasyUI/themes/icon.css}"/>
    <!-- css -->

    <!-- UI库 -->
    <link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/metisMenu/dist/metisMenu.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/animate.css/animate.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/dist/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/datatables.net-bs/css/dataTables.bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/sweetalert/lib/sweet-alert.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/fooTable/css/footable.core.min.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/select2-3.5.2/select2.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/select2-bootstrap/select2-bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/summernote/dist/summernote.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/summernote/dist/summernote-bs3.css}"/>
    <link rel="stylesheet" th:href="@{/css/datepicker/daterangepicker-bs3.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css}"/>

    <style>
        .dataTable {
            width: 100% !important;
        }
    </style>

    <!-- App styles -->
    <link rel="stylesheet" th:href="@{/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css}"/>
    <link rel="stylesheet" th:href="@{/fonts/pe-icon-7-stroke/css/helper.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/styles/style.css}"/>
    <style>
        body{
            line-height: 2em;
            font-size: 16px;
        }
    </style>


    <!-- App styles -->
    <link rel="stylesheet" th:href="@{/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css}"/>
    <link rel="stylesheet" th:href="@{/fonts/pe-icon-7-stroke/css/helper.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/dtbuttons/css/buttons.bootstrap4.css}"/>
</head>
<body>

<!-- Main Wrapper -->
<div id="container">
    <div class="col-md-12">
        <div class="hpanel email-compose">
            <div class="panel-heading hbuilt">
                <input type="hidden" name="ticketId" value="${detail['id']}"/>
                <div class="p-xs h4">
                    <small class="pull-right" th:text="${beautifulTime}"></small>
                    <label class="label label-danger" th:text="${detail['appealCategoryStr']}"></label>
                    <label class="label label-warning" th:text="${detail['contentCategoryStr']}"></label>
                </div>
            </div>
            <div class="border-top border-left border-right bg-light">
                <div class="p-m">

                    <div>
                        <span class="font-extra-bold">标题: </span>
                        [[${detail['title']}]]
                    </div>
                    <div>
                        <span class="font-extra-bold">来信人: </span>
                        <span th:text="${detail['authorName']}"></span><span th:text="${detail['phoneNo']}"></span>
                    </div>
                    <div>
                        <span class="font-extra-bold">来信地址: </span>
                        [[${detail['address']}]]
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div>
                    <p th:text="${detail['body']}"></p>
                </div>
            </div>
            <style type="text/css">
                .vertical-timeline-icon.self {
                    background: #d9534f;
                    color: #fff;
                }
            </style>
            <div class="col-md-12">
                <div class="hpanel">
                    <th:block th:each="moment:${timeline}">
                    <div class="v-timeline vertical-container animate-panel" data-child="vertical-timeline-block" data-delay="1">
                        <div class="vertical-timeline-block">
                            <div class="vertical-timeline-content">
                                <div class="p-sm">
                                            <span class="vertical-date pull-right"><small style="color: #777777;" th:text="${moment['created_at']}"></small> </span>
                                    <h2 style="font-size: 16px;">来自
                                        <small>[[${moment['userOrganName']}]][[${moment['jobTitleName']}]]&nbsp;&nbsp;[[${moment['user_name']}]]</small>
                                        <label class="label label-danger" th:if="${moment['type'] == '0'}">转派</label>
                                        <label class="label label-warning" th:if="${moment['type'] == '1'}">批示</label>
                                        <label class="label label-warning" th:if="${moment['type'] == '2'}">回复</label>
                                        <label class="label label-warning" th:if="${moment['type'] == '3'}">意见</label>
                                    </h2>
                                    <p class="text-danger" th:if="${moment['type'] == '0'}">转发给：[[${moment['cc']}]]</p>
                                    <p th:text="${moment['body']}"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    </th:block>
                </div>
            </div>
            <!-- for tab -->
            <style type="text/css">
                .tabBox {
                    border: 1px solid #d9534f;
                    border-bottom: none;
                }

                .tabBox .tabs {
                    float: left;
                    background: #d9534f;
                    color: #fff;
                    text-align: center;
                    width: 33.33333%;
                    padding: 5px 0;
                    cursor: pointer;
                }

                .tabBox .tabs.active {
                    background: #fff;
                    color: #d9534f;
                }

                .tabContent {
                    border: 1px solid #d9534f;
                    border-top: none;
                    height: 150px;
                    overflow: scroll;
                    overflow-x: hidden;
                    display: none;
                }

                .tabContent.tabContent1 {
                    display: block;
                }

                .tabContent li.tabClist {
                    list-style: none;
                    height: 35px;
                    line-height: 35px;
                    padding: 0 10px;
                    cursor: pointer;
                    border-bottom: 1px dashed #d9534f;
                }

                .tabContent li.tabClist span {
                    margin-left: 20px;
                }

                .tabContent li.tabClist.active {
                    background: #d9534f;
                    color: #fff;
                    border-color: #fff;
                }
            </style>
            <div>
               
                <a class="pull-right btn btn-default" style="margin-right:  20px;" href="javascript:window.print()">打印</a>
				 <!-- <a class="pull-right btn btn-default" href="javascript:history.back();">返回</a>-->
            </div>
        </div>
    </div>
</div>
</body>
<script>
    /*<![CDATA[*/
    var contextRoot = "";
    /*]]>*/
</script>
<script th:src="@{/verdor12345/jquery-1.8.3.min.js}"></script>
<script th:src="@{/verdor12345/qxEasyUI/jquery.easyui.min.js}"></script>
<script th:src="@{/verdor12345/qxEasyUI/lang-zhCN.js}"></script>
<script th:src="@{/js/common/path.js}"></script>
</html>